<template>


  <div id="bar1" style="height:300px; width: 100%" ></div>

</template>

<script>
 
export default {
 data(){
return{

}
 },

  mounted() {
    this.abilityrank()
    
    
  },
  methods: {
    abilityrank(){
            this.bar1 = this.$echarts.init(document.getElementById("bar1"));
      // 绘制图表
      var option1 = {
        title: {
          text: "APT组织综合能力排行",
          textStyle: {
            color: "#7AFEC6",
          },
        },

        xAxis: {
          type: "category",
          data: ["FINI0", "Darkhotel", "APT1", "APT41", "APT28"],
          axisLabel: {
              color: "#FFFFFF	", 
            },
        },
        yAxis: {
          type: "value",
        },
        tooltip: {
          trigger: "item", //设置是在轴上触发，还是在数据上触发
        },
        series: [
          {
            data: [22, 31, 68, 102, 131],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
            itemStyle: {
              color: "#F43368",
              barBorderRadius: [5, 5, 0, 0], // （顺时针左上，右上，右下，左下）
            },
          },
        ],
      };
      this.bar1.setOption(option1);
    },
    }
    

}
</script>

<style>


</style>